<div id="zb_kehuxinxi">
<section class="content-header">
  <h1>
    客户信息
    <small>租摆</small>
  </h1>
  <ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
    <li>租摆</li>
    <li class="active">客户信息</li>
  </ol>
</section>

<section class="content">
  <div class="row">
    <div class="col-xs-12">
      <div class="box">
        <div class="box-header">
          <div class="btn-group pull-left" data-type="actionBar">
            <button type="button" class="btn btn-default" data-action="addByForm"><i class="fa fa-plus"></i> 添加</button>
            <button type="button" class="btn btn-default" data-action="modify"><i class="fa fa-pencil"></i> 修改</button>
            <button type="button" class="btn btn-default" data-action="delete"><i class="fa fa-remove"></i> 删除</button>
          </div>
          <div class=" pull-right" data-type="columnControl">
          </div>
          <div class=" pull-right " data-type="searchControl">
          </div>
          <div class="clearfix"></div>
        </div>
        <div class="box-body">
          <table class="table table-bordered table-striped table-hover"></table>
        </div>
      </div>
    </div>
  </div>
</section>

<script type="text/template" data-for="tp_editor">
  <form role="form" class="form-horizontal">
    <div class="box-body">
      <div class="form-group">
        <label class="col-sm-4 control-label">客户名称</label>

        <div class="col-sm-8">
          <input type="text" class="form-control" placeholder="输入客户名称" name="name" value="<%=data.p1?data.p1:''%>">
          <span class="help-block"></span>
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-4 control-label">是否有分公司</label>

        <div class="col-sm-8">
          <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default <%=data.p4=='是' ? 'active' : ''%>" data-toggle-class="btn-primary" data-toggle-passive-class="btn-default">
              <input type="radio" name="hasBranch" value="1" <%=data.p4=='是' ? 'checked' : ''%>> 是
            </label>
            <label class="btn btn-default <%=data.p4=='否' ? 'active' : ''%>" data-toggle-class="btn-primary" data-toggle-passive-class="btn-default">
              <input type="radio" name="hasBranch" value="0" <%=data.p4=='否' ? 'checked' : ''%>> 否
            </label>
          </div>
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-4 control-label">子公司名称</label>

        <div class="col-sm-8">
          <input type="text" class="form-control" placeholder="输入子公司名称" name="p2" value="<%=data.p2?data.p2:''%>">
          <span class="help-block"></span>
        </div>
      </div>
    </div>
  </form>
</script>

<script>
  USEN(function () {
    //模块ID(全系统唯一)
    var id = "#zb_kehuxinxi";

    //定义页面变量
    var $el = $(id);
    var $actionBar = $el.find("[data-type=actionBar]");
    var tableId = id + " table.table";
    var $table = $(tableId);
    var $editor = $el.find("[data-for=tp_editor]");
    var myTable;


    //定义增\删\改 方法
    var editor = {
      add : function(){
        USEN.modal({
          title:"创建客户",
          submitTxt:"创建",
          submitCb:function($el){
            //提交表单
            $el.find("form").ajaxSubmit({
              url: './simdata/common_add_action.json',
              beforeSubmit: function (data) {
//                console.log("数据提交之前.")
              },
              success: function (data, state, obj) {
                USEN.notifyAlert({
                  title:"提示:",
                  content:'提交成功,刷新Table组件'
                });
                $el.modal("hide");
                if (myTable) myTable.ajax.reload();
              }
            })
          },
          filter:function(data){
            return _.template($editor.html())({
              data:data
            });
          }
        });
      },
      remove : function(data){
        USEN.modal({
          title:"提示",
          content:"是否删除这条数据?",
          submitTxt:"删除",
          submitCb:function($el){
            $.ajax({
              url:"./simdata/common_remove_action.json",
              data:data,
              success:function(result){
                USEN.notifyAlert({
                  title:"提示:",
                  content:'删除成功.'
                });
                $el.modal("hide");
                if (myTable) myTable.ajax.reload();
              }
            })
          }
        })
      },
      modify : function(data){
        USEN.modal({
          title:"修改客户信息",
          data:data,
          submitTxt:"修改",
          submitCb:function($el){
            $el.find("form").ajaxSubmit({
              url: './simdata/common_modify_action.json',
              beforeSubmit: function (data) {
                console.log("数据提交之前.")
              },
              success: function (data, state, obj) {
                USEN.notifyAlert({
                  title:"提示:",
                  content:'提交成功,刷新Table组件'
                });
                $el.modal("hide");
                if (myTable) myTable.ajax.reload();
              }
            })
          },
          filter:function(data){
            return _.template($editor.html())({
              data:data
            });
          }
        });
      }
    };

    // 绑定列表编辑按钮事件
    $actionBar.find("[data-action]").on("click",function(){
      var action = $(this).data("action");
      var $selected = $table.find('tr.selected');
      switch(action){
        case "addByForm" :
          editor.add();
          break;
        case "modify" :
                if($selected.length > 0){
                  editor.modify(myTable.row( $selected ).data());
                }else{
                  //提示"请选中要修改的行"
                  USEN.modal({
                    title:"提示",
                    content:"请选中要修改的行.",
                    cancelBtn:true,
                    cancelTxt:"关闭"
                  })
                }
          break;
        case "delete" :
          if($selected.length > 0){
            editor.remove(myTable.row( $selected ).data());
          }else{
            //提示"请选中要修改的行"
            USEN.modal({
              title:"提示",
              content:"请选中要修改的行.",
              cancelBtn:true,
              cancelTxt:"关闭"
            })
          }
          break;
      }
    });

    //初始化datatable数据列表
    myTable = new USEN.Datatable({
      "paging":false,
      "info":false,
      "serverSide":false,
      "scrollX":false,
      //设置ID
      "id":tableId,
      //设置列控制模块容器
      "columnControl":id + " [data-type=columnControl]",
      //设置搜索模块容器
      "searchControl":id + " [data-type=searchControl]",
      //每行"操作"自定义action按钮回调
      onItemAction:function($tr,action){
        switch(action){
          case "modify" :
            editor.modify(this.row( $tr ).data());
            break;
          case "delete" :
            editor.remove(this.row( $tr ).data());
            break;
        }
      },
      //配置服务
      "ajax": "./simdata/common_table_ation.json",
      //对某些列设置默认排序
      "order": [[ 1, 'desc' ]],
      //设置可以拖动区间(不可拖动的列数)
      colReorder: {
        fixedColumnsLeft: 1,
        fixedColumnsRight: 1
      },
      //列设置
      "columns": [
        {
          data: null,
          defaultContent: '',
          className: 'select-checkbox',
          orderable: false, searchable: false,
          width:"30px"
        },
        { "title":"客户编号", "data": "p1"},
        { "title":"客户名称","data": "p2" ,className:"edt"},
        { "title":"分公司名称","data": "p3" ,className:"edt"},
        { "title":"是否含有分公司","data": "p4",className:"edt" },
        { "title": "操作", "data":null,bSortable: false,width:'200px',render: function (data, type, full, meta) {
          return  '<button data-item-action="modify" class="btn btn-primary">修改</button>&nbsp;&nbsp;' +
                  '<button data-item-action="delete" class="btn btn-danger">删除</button>'
        }}
      ]
    })
  });
</script>
</div>